-
Notifications
You must be signed in to change notification settings - Fork 144
feature: Voice Message #426
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Creates * UI components ```javascript import PlaybackTime from "@sendbird/uikit-react/ui/PlaybackTime" import ProgressBar from "@sendbird/uikit-react/ui/ProgressBar" import VoiceMessageInput from "@sendbird/uikit-react/ui/VoiceMessageInput" import VoiceMessageItemBody from "@sendbird/uikit-react/ui/VoiceMessageItemBody" ``` * PlaybackTime: Display the current time in 00:00 format with the received millisecond value * ProgressBar: Display the current progress status with the received maxSize and currentSize of millisecond unit value * VoiceMessageInput: UI component for recording and playing a voice message * VoiceMessageItemBody: UI component for rendering a voice message also able to play voice message * VoiceRecorder ```javascript import { VoiceRecorderProvider, useVoiceRecorderContext } from '@sendbird/uikit-react/VoiceRecorder/context' import useVoiceRecorder from '@sendbird/uikit-react/VoiceRecorder/useVoiceRecorder' ``` * VoiceRecorderProvider: A react context provider component providing `start`, and `stop` functions * useVoiceRecorderContext: A react useContext hook of VoiceRecorderProvider * useVoiceRecorder: A react hook that provides advanced context, `recordingLimit`, `recordingTime`, `recordingFile`, and `recordingStatus`. Recommend using this hook in the customized components. * VoicePlayer ```javascript import { VoicePlayerProvider, useVoicePlayerContext } from '@sendbird/uikit-react/VoicePlayer/context' import useVoicePlayer from '@sendbird/uikit-react/VoicePlayer/useVoicePlayer' ``` * VoicePlayerProvider: A react context provider component providing `play`, and `pause` functions * useVoicePlayerContext: A react useContext hook of VoicePlayerProvider * useVoicePlayer: A react hook that provides advanced context, `playbackTime`, `duration`, and `playingStatus`. Recommend using this hook in the customized components. * utils/isVoiceMessage: A function that you can check if the given message is a voice message ```javascript import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage' const isVoiceMsg: boolean = isVoiceMessage(message); ``` Edits * Install `lamejs` to transcode the audio file to mp3 * Add props `isVoiceMessageEnabled` and `voiceRecord` props to the App, `SendbirdProvider`, and `MessageInput` components, to turn on/off the voice message recording feature ```javascript <SendbirdProvider isVoiceMessageEnabled voiceRecord={{ maxRecordingTime: 60000, minRecordingTime: 1000, }} > {/* implement custom application */} </SendbirdProvider> ``` * Add props `renderFileUploadIcon`, `renderVoiceMessageIcon`, and `renderSendMessageIcon` into the `Channel`, `ChannelUI`, and `MessageInput` component * Add `onVoiceMessageIconClick` props to the `MessageInput` component * Add `onBeforeSendVoiceMessage` props to the `Channel` component * Fetch message list including `MetaArray` in the `Channel` and `Thread` modules * Provide new icon-type `AudioOnLined` & new icon-color Primary2 and OnBackground4 * Provide new string sets ```javascript <SendbirdProvider stringSet={{ BUTTON__OK: 'OK', VOICE_MESSAGE: 'Voice Message', MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: 'You\'re muted by the operator.', MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: 'Channel is frozen.', }} > {/* implement custom application */} </SendbirdProvider> ``` * `BUTTON__OK`: 'OK' → Used on the submit button of pop up modal * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED`: 'You\'re muted by the operator.' → Used in an alert pop-up modal * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN`: 'Channel is frozen.' → Used in an alert pop-up modal * `VOICE_MESSAGE`: 'Voice Message' → Used in ChannelPreviewItem, QuoteMessage, and MessageSearch to appear that the message type is the voice
This reverts commit ea3a72d.
* Integrated sample * Ignore Korean string set * Allow profile edit * Disappear VoiceMessageInput in open channel * Place MessageInput at the bottom of the Thread component * Apply message highlight by message search for voice message * Disappear file icon on the message search items if it's a voice message * Change the useEffect dependency of VoiceMessageItemBody from message.reactions to message.reactions.length for changing border-radius when reactions length is changed * Change the useEffect dependency of useGetThreadList from parentMessage to parentMessage.messageId because it caused the refresh of the thread list when the parent message is updated
* Get stream when requesting record start to disappear the red record icon on the browser tap that always appears
* Use dux pattern for voice player data structure * Add `IDLE` status to the VoicePlayerStatus * Use document&element to refer the Audio element in the unmount scope of useEffect in useVoicePlayer
* Bundle latest lamejs version * Link to LAME as separate jar * Fully acknowledge that we are using LAME > Note: lamejs had some issues in [1.2.1](https://github.com/zhuker/lamejs/releases/tag/1.2.1), fixes were merged to main. But, they never released 1.2.2. Please remove from `_extrnals` when lame 1.2.2 or higher is released fixes: https://sendbird.atlassian.net/browse/UIKIT-3259
[QM-2595](https://sendbird.atlassian.net/browse/QM-2595) ## Description Of Changes * Use uuid for useVoicePlayer of VoiceMessageInput to divide each VoiceMessageInput comp
[QM-2594](https://sendbird.atlassian.net/browse/QM-2594) [QM-2601](https://sendbird.atlassian.net/browse/QM-2601) ## Description Of Changes * Apply throttling to the VoiceMessageInput component * Do not pause voice player when empty useVoicePlayer is unmounted
sravan-s
approved these changes
Mar 3, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds
lamejs
to transcode the audio file to mp3start
, andstop
functionsrecordingLimit
,recordingTime
,recordingFile
, andrecordingStatus
. Recommend using this hook in the customized components.play
, andpause
functionsplaybackTime
,duration
, andplayingStatus
. Recommend using this hook in the customized components.Edits
isVoiceMessageEnabled
andvoiceRecord
props to the App,SendbirdProvider
, andMessageInput
components, to turn on/off the voice message recording featurerenderFileUploadIcon
,renderVoiceMessageIcon
, andrenderSendMessageIcon
into theChannel
,ChannelUI
, andMessageInput
componentonVoiceMessageIconClick
props to theMessageInput
componentonBeforeSendVoiceMessage
props to theChannel
componentMetaArray
in theChannel
andThread
modulesAudioOnLined
& new icon-color Primary2 and OnBackground4BUTTON__OK
: 'OK' → Used on the submit button of pop up modalMODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED
: 'You're muted by the operator.' → Used in an alert pop-up modalMODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN
: 'Channel is frozen.' → Used in an alert pop-up modalVOICE_MESSAGE
: 'Voice Message' → Used in ChannelPreviewItem, QuoteMessage, and MessageSearch to appear that the message type is the voice## External Contributions